<template>
  <div>
    <el-header style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
      <div>
        <svg-icon class="primary" :icon-class="$route.meta.icon" />
        <span class="primary">{{$route.meta.title}}</span>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="tableData"
        v-loading="isLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        v-loadMore="[payLoads,'sysPlugin-list']"
        border
        stripe>
        <el-table-column
          prop="pluginId"
          label="插件ID"
          width="250">
        </el-table-column>
        <el-table-column
          prop="name"
          label="插件名称"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          prop="version"
          label="插件版本"
          >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pluginType"
          label="插件类型"
          width="180">
          <template slot-scope="{row}">
              {{ row.pluginType | pluginTypeFilter}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isInstalled"
          label="是否安装"
          width="140">
          <template slot-scope="{row}">
            <el-tag :type="row.isInstalled | tagFilter">
              {{ row.isInstalled | isInstalledFilter}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isEnabled"
          label="是否启用"
          width="140">
          <template slot-scope="{row}">
            <el-tag :type="row.isEnabled | tagFilter">
              {{ row.isEnabled | isEnabledFilter}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain  @click="saveSysPlugin(scope.row)" v-if="!scope.row.isInstalled">安装</el-button>
            <div style="display: flex;flex-direction: row;justify-content: center" v-if="scope.row.isInstalled">
              <el-tooltip  class="item" effect="dark" content="配置" placement="top-start">
                <a style="margin-left: 10px" @click="dialogShow(scope.row)">
                  <i style="color: #67C23A" class="el-icon-tickets"></i>
                </a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="scope.row.isEnabled ?'禁用':'启用'" placement="top-start">
                <a style="margin-left: 10px"  @click="openOrCloseClick(scope.row)">
                  <i style="color: #F56C6C" :class="[scope.row.isEnabled ? 'el-icon-open':'el-icon-turn-off']"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <setting-dialog ref="settingDialog" @confirm="dialogConfirm" />
  </div>
</template>
<style lang="scss" scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import loadMore from '@/utils/loadMore.js'
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js';
  import {list,save,update,updateStatus} from '@/api/sysPlugin';
  import SettingDialog from './components/settingDialog'
  export default {
    name:'sysPlugin-list',
    directives: {loadMore},
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        payLoads:'',
        tableData: [],
        isLoading:true,
        mchId:''
      }
    },
    components: {SettingDialog},
    filters:{
      pluginTypeFilter(val){
        if (val  == 1){
          return '存储插件'
        }else if (val  == 2) {
          return '支付插件'
        }else if (val  == 3) {
          return '手机短信'
        }else {
          return '分账插件'
        }
      },
      tagFilter(val){
        if (val){
          return 'success'
        }else {
          return 'warning'
        }
      },
      isInstalledFilter(val){
        if (val){
          return '是'
        }else {
          return '否'
        }
      },
      isEnabledFilter(val){
        if (val){
          return '是'
        }else {
          return '否'
        }
      }
    },
    created(){
      this.mchId = this.$route.query.mchId;
      this.loadSysPlugin()
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysPlugin-list' && newVal.query.mchId!=this.mchId) {
          this.mchId = this.$route.query.mchId;
          this.loadSysPlugin()
        }
      }
    },
    methods: {
      dialogShow(row) {
        console.log('开启设置弹窗')
        this.$refs.settingDialog.show(row.id)
      },
      dialogConfirm(data) {

      },
      saveSysPlugin(row){
        const _this = this
        this.$confirm('是否安装?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
              mchId:_this.mchId,
              pluginId:row.pluginId,
              name:row.name,
              pluginType:row.pluginType,
              version:row.version,
            };
            save(data).then(response => {
            if (response.type == 'success') {
              _this.$message({
                type: 'success',
                message: '安装成功!',
                offset: 120,
                center: true
              })
              _this.loadSysPlugin()
            } else {
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              })
            }
          }).catch(error => {

          })
        }).catch(() => {
        })
      },
      openOrCloseClick(row){
        const _this = this
        this.$confirm(row.isEnabled?'是否禁用？':'是否启用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = new URLSearchParams();
          params.append('id', row.id);
          params.append('status', row.isEnabled?false:true);
          updateStatus(params).then(response => {
            if (response.type == 'success') {
              _this.$message({
                type: 'success',
                message: row.isEnabled?'禁用成功!':'启用成功!',
                offset: 120,
                center: true
              })
              _this.loadSysPlugin()
            } else {
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              })
            }
          }).catch(error => {

          })
        }).catch(() => {
        })
      },
      loadSysPlugin(){
        let _this = this;
        let params = new URLSearchParams();
        params.append('mchId', this.mchId);
        _this.isLoading = true;
        list(params).then(response => {
          console.log(response)
          if (response.type == 'success') {
            _this.tableData = response.data;
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
          _this.isLoading = false;
        }).catch(error => {
          _this.isLoading = false;
        });
      },
    },
  }
</script>
